<template>
    <div id="cesium-container">
    </div>
</template>
  
<script>
export default {
    name: 'ThreeDTilesBatchTableHierarchy',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
            Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzM2RjYjJlOC01ZTQwLTQwODYtOTEwMy02M2U4OGEzYjQyNGUiLCJpZCI6MjI5NjUsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODI0NTYwMzF9.VG2_T9ry8EnBWAh4msJ3s6m2jW_5hgAZQvfEQDh-WQs"
            window.viewer = new window.Cesium.Viewer("cesium-container", {
                // terrainProvider: new window.Cesium.CesiumTerrainProvider({
                //     url: 'http://data.mars3d.cn/terrain',
                //     requestWaterMask: true,
                //     requestVertexNormals: true
                // }),
                imageryProvider: new window.Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                }),
                sceneMode: window.Cesium.SceneMode.SCENE3D,
                vrButton: false,
                animation: false,
                baseLayerPicker: false,
                geocoder: false,
                timeline: false,
                fullscreenButton: false,
                homeButton: false,
                creditContainer: document.createElement('div'),
                infoBox: false,
                navigationHelpButton: false,
                sceneModePicker: false,
                scene3DOnly: true,
                skyBox: new window.Cesium.SkyBox({
                    sources: {
                        positiveX: require('@/assets/images/tycho2t3_80_px.jpg'),
                        negativeX: require('@/assets/images/tycho2t3_80_mx.jpg'),
                        positiveY: require('@/assets/images/tycho2t3_80_py.jpg'),
                        negativeY: require('@/assets/images/tycho2t3_80_my.jpg'),
                        positiveZ: require('@/assets/images/tycho2t3_80_pz.jpg'),
                        negativeZ: require('@/assets/images/tycho2t3_80_mz.jpg'),
                    }
                })
            });
            //开启地形深度检测
            window.viewer.scene.globe.depthTestAgainstTerrain = true;
            //加载3dtiles模型、定位
            let tileset = await new window.Cesium.Cesium3DTileset({
                url: "/model/Tileset/BatchTableHierarchy/tileset.json",
            }).readyPromise
            window.viewer.scene.primitives.add(tileset);
            window.viewer.zoomTo(
                tileset,
                new window.Cesium.HeadingPitchRange(
                    0.0,
                    -0.5,
                    tileset.boundingSphere.radius * 2.0
                )
            );
            console.log(tileset)

            //定义样式数组
            let styleArr = [
                //根据建筑名称字段
                {
                    color: {
                        conditions: [
                            ["${building_name} === 'building0'", "color('purple')"],
                            ["${building_name} === 'building1'", "color('red')"],
                            ["${building_name} === 'building2'", "color('orange')"],
                            ["true", "color('blue')"],
                        ],
                    },
                },
                //根据高度字段
                {
                    color: {
                        conditions: [
                            ["${height} >= 10", "color('purple')"],
                            ["${height} >= 6", "color('red')"],
                            ["${height} >= 5", "color('orange')"],
                            ["true", "color('blue')"],
                        ],
                    },
                },
                //根据要素类
                {
                    color: {
                        conditions: [
                            ["isClass('door')", "color('orange')"],
                            ["true", "color('white')"],
                        ],
                    },
                }

            ]
            //修改模型的样式
            tileset.style = new window.Cesium.Cesium3DTileStyle(styleArr[2]);

            //交互句柄
            const handler = new window.Cesium.ScreenSpaceEventHandler(window.viewer.scene.canvas);
            handler.setInputAction(function (movement) {
                //拾取要素
                let selectedFeature = window.viewer.scene.pick(movement.position);
                if (!selectedFeature) return
                let obj = {}
                //获取要素属性信息
                selectedFeature.getPropertyIds().forEach(id => {
                    obj[id] = selectedFeature.getProperty(id)
                });
                console.log(selectedFeature.getPropertyIds())
                setTimeout(() => {
                    alert(JSON.stringify(obj))
                }, 500)
            }, window.Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
    }
}
</script>
  
<style>
#cesium-container {
    width: 100%;
    height: 100%;
}
</style>
  